<template>
  <div class="h-100">
    <div class="card-box">
      <span
        :class="[activeCard == 1 ? 'active' : '', 'card']"
        @click="activeCard = 1"
      >
        县（市、区）、开发区
      </span>
      <span
        :class="[activeCard == 2 ? 'active' : '', 'card']"
        @click="activeCard = 2"
      >
        阳曲示范区
      </span>
      <span
        :class="[activeCard == 3 ? 'active' : '', 'card']"
        @click="activeCard = 3"
      >
        西山示范区
      </span>
    </div>
    <div class="add-btn">
      <span @click="showUpload = true">信息导入</span>
      <span @click="showDown = true">模板下载</span>
      <span @click="showExport = true">批量导出</span>
    </div>
    <div v-if="activeCard == 1">
      <el-table
        key="1"
        :data="list"
        border
        stripe
        style="width: 100%"
        :height="500"
        tooltip-effect="light"
        :header-cell-style="{
          textAlign: 'center',
        }"
        :cell-style="{
          textAlign: 'center',
        }"
        @selection-change="handleSelectionChange1"
      >
        <el-table-column
          type="selection"
          width="55"
          :reserve-selection="true"
          fixed="left"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a1"
          label="县（市/区/开发区）"
          width="200"
          fixed="left"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a2"
          :label="'2022年\r\n经济数据周期'"
          width="200"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a3"
          :label="'2022年\r\n地区生产总值'"
          width="200"
        >
        </el-table-column>

        <el-table-column
          :show-overflow-tooltip="true"
          prop="a4"
          :label="'2022年规模以上\r\n工业增加值增速'"
          width="200"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a5"
          :label="'2022年\r\n固定资产投资'"
          width="200"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a6"
          :label="'2022年社会消费品零售额\r\n零售额'"
          width="200"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a7"
          :label="'2022年\r\n进出口总额'"
          width="200"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a8"
          :label="'2022年\r\n一般公共预算指出'"
          width="200"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a9"
          :label="'2022年居民\r\n人均可支配收入'"
          width="200"
        >
        </el-table-column>

        <el-table-column
          :show-overflow-tooltip="true"
          prop="a10"
          :label="'2022年居民\r\n消费价格指数'"
          width="200"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a11"
          :label="'2021年\r\n地区生产总值'"
          width="200"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a13"
          :label="'2021年规模以上\r\n工业增加值增速'"
          width="200"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a14"
          :label="'2021年\r\n固定资产投资'"
          width="200"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a15"
          :label="'2021年\r\n社会消费品零售额'"
          width="200"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a16"
          :label="'2021年\r\n进出口总额'"
          width="200"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a17"
          :label="'2021年\r\n一般公共预算指出'"
          width="200"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a18"
          :label="'2021年居民\r\n人均可支配收入'"
          width="200"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a19"
          :label="'2021年居民\r\n消费价格指数'"
          width="200"
        >
        </el-table-column>

        <el-table-column
          :show-overflow-tooltip="true"
          prop="a20"
          :label="'十四五规划目标\r\n地区生产总值增长率'"
          width="200"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a21"
          :label="'十四五规划目标\r\n规模以上企业数'"
          width="200"
        >
        </el-table-column>

        <el-table-column
          :show-overflow-tooltip="true"
          prop="a22"
          :label="'十四五规划目标\r\n固定资产投资增长率'"
          width="200"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a23"
          :label="'十四五规划目标\r\n社会消费品零售总额增长率'"
          width="200"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a24"
          :label="'十四五规划目标\r\n进出口总额'"
          width="200"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a25"
          :label="'十四五规划目标\r\n一般公共预算收入增长率'"
          width="200"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a26"
          :label="'十四五规划目标\r\n居民人均可支配收入'"
          width="200"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a27"
          :label="'十四五规划目标\r\n居民消费价格指数'"
          width="200"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          label="操作"
          fixed="right"
        >
          <template slot-scope="scope">
            <div class="btn-b" @click="goEdit(scope.row.id, 1)">编辑</div>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="page"
        :page-size="per_page"
        layout=" prev, pager, next"
        :total="Number(total)"
      ></el-pagination>
    </div>
    <div v-if="activeCard == 2">
      <el-table
        key="2"
        :data="list"
        border
        stripe
        style="width: 100%"
        :height="500"
        tooltip-effect="light"
        :header-cell-style="{
          textAlign: 'center',
        }"
        :cell-style="{
          textAlign: 'center',
        }"
        @selection-change="handleSelectionChange2"
      >
        <el-table-column
          type="selection"
          width="55"
          :reserve-selection="true"
          fixed="left"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a2"
          :label="'2022年\r\n宏观数据周期'"
          width="200"
          fixed="left"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a3"
          :label="'2022年\r\n地区生产总值（亿元）'"
          width="200"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a3"
          :label="'2022年农产品\r\n加工业产值（亿元）'"
          width="200"
        >
        </el-table-column>

        <el-table-column
          :show-overflow-tooltip="true"
          prop="a4"
          :label="'2022年农业总产值\r\n（亿元）'"
          width="200"
        >
        </el-table-column>

        <el-table-column
          :show-overflow-tooltip="true"
          prop="a5"
          :label="'2022年绿色有机\r\n产品覆盖率（%）'"
          width="200"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a6"
          :label="'2022年新建产业\r\n项目完成投资（亿元）'"
          width="200"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a7"
          :label="'2022年\r\n固定资产投资（亿元）'"
          width="200"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a8"
          :label="'2021年\r\n地区生产总值（亿元）'"
          width="200"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a9"
          :label="'2021年农产品\r\n加工业产值（亿元）'"
          width="200"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a10"
          :label="'2021年\r\n农业总产值（亿元）'"
          width="200"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a11"
          :label="'2021年绿色有机产品\r\n覆盖率（%）'"
          width="200"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a13"
          :label="'2021年新建产业\r\n项目完成投资（亿元）'"
          width="200"
        >
        </el-table-column>

        <el-table-column
          :show-overflow-tooltip="true"
          prop="a14"
          :label="'2021年\r\n固定资产投资（亿元）'"
          width="200"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a15"
          :label="'十四五规划目标\r\n地区生产总值增长率（%）'"
          width="200"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a16"
          :label="'十四五规划目标\r\n农产品加工业产值（亿元）'"
          width="200"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a17"
          :label="'十四五规划目标\r\n农业总产值（亿元）'"
          width="200"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a18"
          :label="'十四五规划目标\r\n绿色有机产品覆盖率（%）'"
          width="200"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a19"
          :label="'十四五规划目标\r\n新建产业项目完成投资(亿元)'"
          width="200"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a20"
          :label="'十四五规划目标\r\n固定资产投资（亿元）'"
          width="200"
        >
        </el-table-column>

        <el-table-column
          :show-overflow-tooltip="true"
          label="操作"
          fixed="right"
        >
          <template slot-scope="scope">
            <div class="btn-b" @click="goEdit(scope.row.id, 2)">编辑</div>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="page"
        :page-size="per_page"
        layout=" prev, pager, next"
        :total="Number(total)"
      ></el-pagination>
    </div>
    <div v-if="activeCard == 3">
      <el-table
        key="3"
        :data="list"
        border
        stripe
        style="width: 100%"
        :height="500"
        tooltip-effect="light"
        :header-cell-style="{
          textAlign: 'center',
        }"
        :cell-style="{
          textAlign: 'center',
        }"
        @selection-change="handleSelectionChange3"
      >
        <el-table-column
          type="selection"
          width="55"
          :reserve-selection="true"
          fixed="left"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a2"
          :label="'2022年\r\n宏观数据周期'"
          width="200"
          fixed="left"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a3"
          :label="'2022年\r\n地区生产总值（亿元）'"
          width="200"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a3"
          :label="'2022年\r\n新建产业项目投资（亿元）'"
          width="200"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a4"
          :label="'2022年\r\n固定资产投资（亿元）'"
          width="200"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a5"
          :label="'2022年\r\n旅客过夜人次（万人次）'"
          width="200"
        >
        </el-table-column>

        <el-table-column
          :show-overflow-tooltip="true"
          prop="a6"
          :label="'2022年\r\n年景区接待人次（万人次）'"
          width="200"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a7"
          :label="'2022年\r\n森林覆盖率（%）'"
          width="200"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a8"
          :label="'2021年\r\n地区生产总值（亿元）'"
          width="200"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a9"
          :label="'2021年\r\n新建产业项目投资（亿元）'"
          width="200"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a10"
          :label="'2021年\r\n固定资产投资（亿元）'"
          width="200"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a11"
          :label="'2021年\r\n旅客过夜人次（万人次）'"
          width="200"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a13"
          :label="'2021年\r\n年景区接待人次（万人次）'"
          width="200"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a14"
          :label="'2021年\r\n森林覆盖率（%）s'"
          width="200"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a15"
          :label="'十四五规划目标\r\n地区生产总值增长率（%）'"
          width="200"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a16"
          :label="'十四五规划目标\r\n新建产业项目投资（亿元）'"
          width="200"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a17"
          :label="'十四五规划目标\r\n固定资产投资（亿元）'"
          width="200"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a18"
          :label="'十四五规划目标\r\n旅客过夜人次（万人次）'"
          width="200"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a19"
          :label="'十四五规划目标\r\n年景区接待人次(万人次)'"
          width="200"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          prop="a20"
          :label="'十四五规划目标\r\n森林覆盖率（%）'"
          width="200"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          label="操作"
          fixed="right"
        >
          <template slot-scope="scope">
            <div class="btn-b" @click="goEdit(scope.row.id, 3)">编辑</div>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="page"
        :page-size="per_page"
        layout=" prev, pager, next"
        :total="Number(total)"
      ></el-pagination>
    </div>

    <el-dialog
      class="tip-dialog"
      title="信息导入"
      :visible.sync="showUpload"
      @close="closeUpload"
    >
      <div class="tip-content">
        请选择上传的文件!
      </div>
      <div slot="footer" class="dialog-footer">
        <div class="qx" @click="closeUpload">
          取消
        </div>
        <div class="qd" @click="closeUpload">
          确 定
        </div>
      </div>
    </el-dialog>
    <el-dialog
      class="tip-dialog"
      title="模板下载"
      :visible.sync="showDown"
      @close="closeDown"
    >
      <div class="tip-content">
        是否下载模板文件？
      </div>
      <div slot="footer" class="dialog-footer">
        <div class="qx" @click="closeDown">
          取消
        </div>
        <div class="qd" @click="closeDown">
          确 定
        </div>
      </div>
    </el-dialog>
    <el-dialog
      class="tip-dialog"
      title="批量导出"
      :visible.sync="showExport"
      @close="closeExport"
    >
      <div class="tip-content">
        是否导出所选数据？
      </div>
      <div slot="footer" class="dialog-footer">
        <div class="qx" @click="closeExport">
          取消
        </div>
        <div class="qd" @click="closeExport">
          确 定
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeCard: 1,
      showUpload: false,
      showDown: false,
      showExport: false,
      list: [
        {
          id: "1",
          a1: "太原市",
          a2: "2022年1月-2022年3月",
          a3: "7600",
          a4: "15%",
          a5: "6988",
          a6: "6988",
          a7: "6988",
          a8: "6988",
          a9: "6988",
          a10: "6988",
          a11: "6988",
          a12: "6988",
          a13: "15%",
          a14: "6988",
          a15: "6988",
          a16: "6988",
          a17: "6988",
          a18: "6988",
          a19: "6988",
          a20: "15%",
          a21: "6988",
          a22: "15%",
          a23: "15%",
          a24: "6988",
          a25: "15%",
          a26: "6988",
          a27: "98",
          a28: "6988",
          a29: "6988",
        },
        {
          id: "2",
          a1: "小店区",
          a2: "2022年4月-2022年6月",
          a3: "7600",
          a4: "15%",
          a5: "6988",
          a6: "6988",
          a7: "6988",
          a8: "6988",
          a9: "6988",
          a10: "6988",
          a11: "6988",
          a12: "6988",
          a13: "15%",
          a14: "6988",
          a15: "6988",
          a16: "6988",
          a17: "6988",
          a18: "6988",
          a19: "6988",
          a20: "15%",
          a21: "6988",
          a22: "15%",
          a23: "15%",
          a24: "6988",
          a25: "15%",
          a26: "6988",
          a27: "98",
          a28: "6988",
          a29: "6988",
        },
        {
          id: "3",
          a1: "迎泽区",
          a2: "2022年7月-2022年9月",
          a3: "7600",
          a4: "15%",
          a5: "6988",
          a6: "6988",
          a7: "6988",
          a8: "6988",
          a9: "6988",
          a10: "6988",
          a11: "6988",
          a12: "6988",
          a13: "15%",
          a14: "6988",
          a15: "6988",
          a16: "6988",
          a17: "6988",
          a18: "6988",
          a19: "6988",
          a20: "15%",
          a21: "6988",
          a22: "15%",
          a23: "15%",
          a24: "6988",
          a25: "15%",
          a26: "6988",
          a27: "98",
          a28: "6988",
          a29: "6988",
        },
        {
          id: "3",
          a1: "迎泽区",
          a2: "2022年7月-2022年9月",
          a3: "7600",
          a4: "15%",
          a5: "6988",
          a6: "6988",
          a7: "6988",
          a8: "6988",
          a9: "6988",
          a10: "6988",
          a11: "6988",
          a12: "6988",
          a13: "15%",
          a14: "6988",
          a15: "6988",
          a16: "6988",
          a17: "6988",
          a18: "6988",
          a19: "6988",
          a20: "15%",
          a21: "6988",
          a22: "15%",
          a23: "15%",
          a24: "6988",
          a25: "15%",
          a26: "6988",
          a27: "98",
          a28: "6988",
          a29: "6988",
        },
        {
          id: "3",
          a1: "迎泽区",
          a2: "2022年7月-2022年9月",
          a3: "7600",
          a4: "15%",
          a5: "6988",
          a6: "6988",
          a7: "6988",
          a8: "6988",
          a9: "6988",
          a10: "6988",
          a11: "6988",
          a12: "6988",
          a13: "15%",
          a14: "6988",
          a15: "6988",
          a16: "6988",
          a17: "6988",
          a18: "6988",
          a19: "6988",
          a20: "15%",
          a21: "6988",
          a22: "15%",
          a23: "15%",
          a24: "6988",
          a25: "15%",
          a26: "6988",
          a27: "98",
          a28: "6988",
          a29: "6988",
        },
        {
          id: "3",
          a1: "迎泽区",
          a2: "2022年7月-2022年9月",
          a3: "7600",
          a4: "15%",
          a5: "6988",
          a6: "6988",
          a7: "6988",
          a8: "6988",
          a9: "6988",
          a10: "6988",
          a11: "6988",
          a12: "6988",
          a13: "15%",
          a14: "6988",
          a15: "6988",
          a16: "6988",
          a17: "6988",
          a18: "6988",
          a19: "6988",
          a20: "15%",
          a21: "6988",
          a22: "15%",
          a23: "15%",
          a24: "6988",
          a25: "15%",
          a26: "6988",
          a27: "98",
          a28: "6988",
          a29: "6988",
        },
        {
          id: "3",
          a1: "迎泽区",
          a2: "2022年7月-2022年9月",
          a3: "7600",
          a4: "15%",
          a5: "6988",
          a6: "6988",
          a7: "6988",
          a8: "6988",
          a9: "6988",
          a10: "6988",
          a11: "6988",
          a12: "6988",
          a13: "15%",
          a14: "6988",
          a15: "6988",
          a16: "6988",
          a17: "6988",
          a18: "6988",
          a19: "6988",
          a20: "15%",
          a21: "6988",
          a22: "15%",
          a23: "15%",
          a24: "6988",
          a25: "15%",
          a26: "6988",
          a27: "98",
          a28: "6988",
          a29: "6988",
        },
        {
          id: "3",
          a1: "迎泽区",
          a2: "2022年7月-2022年9月",
          a3: "7600",
          a4: "15%",
          a5: "6988",
          a6: "6988",
          a7: "6988",
          a8: "6988",
          a9: "6988",
          a10: "6988",
          a11: "6988",
          a12: "6988",
          a13: "15%",
          a14: "6988",
          a15: "6988",
          a16: "6988",
          a17: "6988",
          a18: "6988",
          a19: "6988",
          a20: "15%",
          a21: "6988",
          a22: "15%",
          a23: "15%",
          a24: "6988",
          a25: "15%",
          a26: "6988",
          a27: "98",
          a28: "6988",
          a29: "6988",
        },
        {
          id: "3",
          a1: "迎泽区",
          a2: "2022年7月-2022年9月",
          a3: "7600",
          a4: "15%",
          a5: "6988",
          a6: "6988",
          a7: "6988",
          a8: "6988",
          a9: "6988",
          a10: "6988",
          a11: "6988",
          a12: "6988",
          a13: "15%",
          a14: "6988",
          a15: "6988",
          a16: "6988",
          a17: "6988",
          a18: "6988",
          a19: "6988",
          a20: "15%",
          a21: "6988",
          a22: "15%",
          a23: "15%",
          a24: "6988",
          a25: "15%",
          a26: "6988",
          a27: "98",
          a28: "6988",
          a29: "6988",
        },
        {
          id: "3",
          a1: "迎泽区",
          a2: "2022年7月-2022年9月",
          a3: "7600",
          a4: "15%",
          a5: "6988",
          a6: "6988",
          a7: "6988",
          a8: "6988",
          a9: "6988",
          a10: "6988",
          a11: "6988",
          a12: "6988",
          a13: "15%",
          a14: "6988",
          a15: "6988",
          a16: "6988",
          a17: "6988",
          a18: "6988",
          a19: "6988",
          a20: "15%",
          a21: "6988",
          a22: "15%",
          a23: "15%",
          a24: "6988",
          a25: "15%",
          a26: "6988",
          a27: "98",
          a28: "6988",
          a29: "6988",
        },
      ],
      page: 1,
      per_page: 10,
      total: 3,
      selectIndex1: [],
      selectIndex2: [],
      selectIndex3: [],
    };
  },
  mounted() {
    this.activeCard = localStorage.getItem("activeType") || 1;
  },
  methods: {
    goEdit(id, type) {
      localStorage.setItem("activeType", type);
      this.$router.push({
        name: "editData",
        query: {
          id,
          type,
        },
      });
    },
    handleCurrentChange(val) {
      console.log(val);
    },
    closeUpload() {
      this.showUpload = false;
    },
    closeDown() {
      this.showDown = false;
    },
    closeExport() {
      this.showExport = false;
    },
    handleSelectionChange1(val) {
      this.selectIndex1 = val.map((item) => {
        return item.id;
      });
    },
    handleSelectionChange2(val) {
      this.selectIndex2 = val.map((item) => {
        return item.id;
      });
    },
    handleSelectionChange3(val) {
      this.selectIndex3 = val.map((item) => {
        return item.id;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.h-100 {
  height: 100%;
  text-align: left;
  overflow: hidden;
}
.add-btn {
  span {
    margin-right: 30px;
    display: inline-block;
    width: 120px;
    height: 38px;
    line-height: 38px;
    background: #f89718;
    border-radius: 4px;
    font-size: 16px;
    color: #ffffff;
    cursor: default;
    text-align: center;
  }
}
.card {
  display: inline-block;
  margin: 0 30px 30px 0;
  width: 230px;
  height: 40px;
  line-height: 40px;
  background: #eff1f5;
  border-radius: 6px;
  font-size: 16px;
  color: #333333;
  text-align: center;
  cursor: default;
}
.card.active {
  font-weight: bold;
  color: #ffffff;
  background: #5889dc;
}

/deep/.tip-dialog .el-dialog {
  padding: 0 46px;
  width: 720px !important;
  height: 360px !important;
  top: 50%;
  margin-top: -180px !important;
  box-shadow: 0px 5px 50px 0px rgba(186, 186, 186, 0.5);
  border-radius: 20px;
}
.tip-content {
  padding: 20px 50px;
  font-size: 20px;
  color: #333;
  text-align: center;
}

/deep/ .el-dialog__header {
  padding-top: 30px;
  height: 100px;
  line-height: 70px;
  border-bottom: 1px dashed #ddd;
  text-align: center;

  .el-dialog__title {
    font-size: 30px;
    font-weight: bold;
    color: #446db3;
  }
}

/deep/.el-dialog__body {
  padding: 30px 20px;
  .tips {
    font-size: 24px;
  }
  li {
    margin: 0 auto;
    // span {
    //   width: 80px !important;
    //   padding: 0 !important;
    //   font-size: 18px;
    //   color: #333333;
    // }
    .el-input__inner {
      width: 350px;
      height: 54px;
      background: #f7f7f7 !important;
      border-radius: 8px;
      border: none !important;
    }
  }
}
/deep/.dialog-footer {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  justify-content: space-evenly;
  .qx {
    display: inline-block;
    width: 247px;
    height: 48px;
    line-height: 44px;
    border: 2px solid #446db3;
    border-radius: 10px;
    font-size: 26px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #446db3;
    text-align: center;
    cursor: default;
  }
  .qd {
    display: inline-block;
    width: 247px;
    height: 48px;
    line-height: 44px;
    background: #446db3;
    box-shadow: 0px 2px 5px 0px rgba(68, 109, 179, 0.5);
    border: 2px solid #446db3;
    border-radius: 10px;
    font-size: 26px;
    font-weight: bold;
    color: #ffffff;
    text-align: center;
    cursor: default;
  }
}
/deep/ .el-icon-close:before {
  content: "";
  display: block;
  width: 21px;
  height: 20px;
  background: url("~@img/system/icon-close.png");
}
/deep/.el-dialog__headerbtn {
  right: 50px;
}
.edit-btn {
  display: inline-block;
  margin-left: 20px;
  width: 50px;
  height: 24px;
  line-height: 24px;
  background: #5889dc;
  border-radius: 4px;
  font-size: 14px;
  color: #ffffff;
  cursor: default;
}
/deep/ .el-table {
  margin-top: 30px;
}
/deep/ .el-table--border th.el-table__cell {
  padding: 0;
  height: 48px;
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
  background: #446db3;
  border-right: none;
}
/deep/
  .el-table--striped
  .el-table__body
  tr.el-table__row--striped
  td.el-table__cell {
  background: #f7faff;
}

/deep/ .el-pagination {
  text-align: right;
  margin: 20px 25px 0 0;
}
/deep/ .el-pager li {
  margin: 0 8px;
  min-width: 40px;
  height: 40px;
  line-height: 40px;
  background: #fafafa;
  box-shadow: 0px 0px 4px 0px rgba(86, 86, 86, 0.11);
  border-radius: 6px;
  font-size: 16px;
  color: #666666;
}
/deep/ .el-pager li.active {
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  background: #5889dc;
  box-shadow: 0px 0px 3px 0px rgba(0, 50, 89, 0.4);
}
/deep/ .el-pagination button {
  padding: 0;
  width: 40px;
  height: 40px;
  background: #fafafa;
  box-shadow: 0px 0px 4px 0px rgba(86, 86, 86, 0.11);
  border-radius: 6px;
}
.btn-o {
  display: inline-block;
  width: 50px;
  height: 24px;
  line-height: 24px;
  background: #f89718;
  border-radius: 4px;
  font-size: 14px;
  color: #ffffff;
  cursor: default;
}

.btn-b {
  display: inline-block;
  width: 50px;
  height: 24px;
  line-height: 24px;
  background: #5889dc;
  border-radius: 4px;
  font-size: 14px;
  color: #ffffff;
  cursor: default;
}
/deep/ .el-table th.el-table__cell > .cell {
  white-space: pre;
}

/*
  *常用电脑尺寸  1680 * 900
  *              1536 * 864
  *              1440 * 900
  *ipad pro      1366 * 1024
  *ipad mini     1024 * 768
  *ipad          1024 * 768
 */
/*分辨率低于1680，采用下面的样式*/
@media screen and (max-device-width: 1680px) {
  /deep/.el-table {
    height: 460px !important;
  }
  .right .head span {
    margin-right: 50px !important;
    font-size: 18px !important;
  }
}
/*分辨率低于1536，采用下面的样式*/
@media screen and (max-device-width: 1536px) {
  /deep/.el-table {
    height: 420px !important;
  }
  .right .head span {
    margin-right: 50px !important;
    font-size: 18px !important;
  }
}
/*分辨率低于1440，采用下面的样式*/
@media screen and (max-device-width: 1440px) {
  /deep/.el-table {
    height: 460px !important;
  }
  .right .head span {
    margin-right: 50px !important;
    font-size: 18px !important;
  }
}
/*分辨率低于1366，采用下面的样式*/
@media screen and (max-device-width: 1366px) {
  /deep/.el-table {
    height: 540px !important;
  }
}
/*分辨率低于1180，采用下面的样式*/
@media screen and (max-device-width: 1180px) {
  /deep/.el-table {
    height: 390px !important;
  }
}
/*分辨率低于1024，采用下面的样式*/
@media screen and (max-device-width: 1024px) {
  /deep/.el-table {
    height: 340px !important;
  }
  .card {
    width: 180px;
    font-size: 14px;
  }
}
</style>
